<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue-infinite-scroll</title>
  <style>
  	*{padding: 0;margin: 0;}
  	.app ul li{
  		line-height: 50px;list-style: none; font-size: 12px;
  	}
  </style>
</head>
<body>
<div class="app"
     style="width: 400px;margin: 0 auto;border: 1px solid #ccc;"
     v-infinite-scroll="loadMore"
     infinite-scroll-disabled="busy"
     infinite-scroll-distance="10">
     <h2>滚动加载更多</h2>
     <button type="button" showbase>Click here to show a msgbox.</button>
 
 
     <ul>
     	<li>111</li>
     	<li>222</li>
     	<li>333</li>
     	<li>444</li>
     	<li>555</li>
     	<li>666</li>
     	<li>777</li>
     	<li>888</li>
     	<li>999</li>
     	<li>101010</li>
     </ul>
</div>
<script src="./vue.min.js"></script>
<script src="./vue-infinite-scroll.js"></script>
<script>

  var app = document.querySelector('.app')
  new Vue({
    el: app,
    data:{
      	busy: false,
      	count:0,
    },
    methods: {
      loadMore: function () {
        var self = this;
        self.busy = true;
        console.log('loading... ' + new Date());
        setTimeout(function () {
          var app = document.querySelector('.app')
          var height = app.clientHeight;
          app.style.height = height + 50 + 'px';
          	var addUL =document.querySelector('.app>ul');
          	var $li=document.createElement('li');
	        $li.innerHTML= new Date()+' ~ '+self.count;
	        addUL.appendChild($li);
	        self.count++;
          console.log('end... ' + new Date());
          self.busy = false
        }, 1000)
        
      }
    }
  })
</script>
</body>
</html>